<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover"
    />
    <title>Resume</title>
    <link href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/tailwindcss/2.2.19/tailwind.min.css" type="text/css" rel="stylesheet" />
    <link rel="stylesheet" href="./style.css" />
    <style media="print">
      body {
        margin: 0;
      }
      .page2 {
        /* page-break-before: always; */
        margin-top: 30px;
      }
    </style>
  </head>

  <body>
    <article id="app" class="gap-2">
      <section class="bio flex flex-col gap-4">
        <div class="flex items-center">
          <h1 class="">{{ name }}</h1>
          <div class="t-color flex items-center">
            <span class="w-8 mx-1 bg-red h-px" style="background-color: rgba(105, 105, 105, 0.2)"></span>
            <span> {{ jobTitle }} </span>
          </div>
        </div>
        <!-- <div class="my-3 flex gap-4">
          <span style="padding: 10px 14px; background-color: rgba(105, 105, 105, 0.2)">{{ gender }}</span>
          <span style="padding: 10px 14px; background-color: rgba(105, 105, 105, 0.2)">{{ age }}</span>
        </div> -->
        <ul class="address">
          <li>
            <span class="svg-icon">
              <svg
                style="width: 18px; height: 18px"
                t="1676557070331"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="8306"
                width="200"
                height="200"
              >
                <path
                  d="M829.35808 284.30336a51.2 51.2 0 0 0-51.17952-51.17952l-202.79296-0.08192h-0.02048a51.2 51.2 0 0 0-0.02048 102.4l79.2576 0.04096-142.9504 142.9504a240.16896 240.16896 0 0 0-130.94912-38.58432 240.37376 240.37376 0 0 0-171.06944 70.8608c-94.3104 94.28992-94.3104 247.78752 0 342.1184a240.39424 240.39424 0 0 0 171.06944 70.84032c64.63488 0 125.37856-25.16992 171.06944-70.84032a240.29184 240.29184 0 0 0 70.8608-171.06944c0-47.2064-13.55776-92.24192-38.58432-130.94912l142.9504-142.9504 0.02048 79.29856a51.2 51.2 0 0 0 51.2 51.17952h0.02048a51.2 51.2 0 0 0 51.17952-51.22048l-0.06144-202.81344z m-350.0032 496.128a138.58816 138.58816 0 0 1-98.65216 40.83712 138.6496 138.6496 0 0 1-98.65216-40.83712 139.73504 139.73504 0 0 1 0-197.3248 138.69056 138.69056 0 0 1 98.65216-40.8576c37.2736 0 72.2944 14.52032 98.65216 40.8576a138.6496 138.6496 0 0 1 40.8576 98.65216c0 37.2736-14.52032 72.31488-40.8576 98.67264z"
                  p-id="8307"
                ></path>
              </svg>
            </span>
            <span class="icon-txt">{{ gender }}</span>
          </li>
          <li>
            <span class="svg-icon">
              <svg
                t="1676557418424"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="10229"
                width="200"
                height="200"
              >
                <path
                  d="M810.666667 384h-256V286.72A85.333333 85.333333 0 0 0 597.333333 213.333333a283.733333 283.733333 0 0 0-62.293333-119.466666 20.48 20.48 0 0 0-17.066667-8.533334h-11.946666a20.48 20.48 0 0 0-17.066667 8.533334A283.733333 283.733333 0 0 0 426.666667 213.333333a85.333333 85.333333 0 0 0 42.666666 73.386667V384H213.333333a85.333333 85.333333 0 0 0-85.333333 85.333333v256a42.666667 42.666667 0 0 0 42.666667 42.666667v128a42.666667 42.666667 0 0 0 42.666666 42.666667h597.333334a42.666667 42.666667 0 0 0 42.666666-42.666667v-128a42.666667 42.666667 0 0 0 42.666667-42.666667v-256a85.333333 85.333333 0 0 0-85.333333-85.333333z m-42.666667 469.333333H256v-90.88a170.666667 170.666667 0 0 0 96.426667-67.84 210.346667 210.346667 0 0 0 319.146666 0A170.666667 170.666667 0 0 0 768 762.453333z"
                  p-id="10230"
                ></path>
              </svg>
            </span>
            <span class="icon-txt">{{ age }}</span>
          </li>
          <li>
            <span class="svg-icon">
              <svg width="18px" height="18px" viewBox="0 0 18 18" fill="none">
                <circle cx="9" cy="9" r="9" fill="white" fill-opacity="0.7"></circle>
                <path
                  d="M5.37293 6.26408L6.4069 5.23107C6.47983 5.15781 6.56652 5.09968 6.66199 5.06003C6.75746 5.02038 6.85982 4.99998 6.9632 5C7.17387 5 7.37193 5.08252 7.52047 5.23107L8.63307 6.34369C8.70633 6.41663 8.76446 6.50332 8.80411 6.59879C8.84376 6.69426 8.86416 6.79662 8.86414 6.9C8.86414 7.11068 8.78162 7.30874 8.63307 7.45728L7.8195 8.27087C8.00994 8.69064 8.27471 9.07251 8.60104 9.39806C8.92655 9.72518 9.30838 9.99092 9.7282 10.1825L10.5418 9.36893C10.6147 9.29567 10.7014 9.23755 10.7969 9.19789C10.8923 9.15824 10.9947 9.13784 11.0981 9.13786C11.3088 9.13786 11.5068 9.22039 11.6554 9.36893L12.7689 10.4806C12.8423 10.5537 12.9005 10.6405 12.9401 10.7362C12.9798 10.8318 13.0001 10.9343 13 11.0379C13 11.2485 12.9175 11.4466 12.7689 11.5951L11.7369 12.6272C11.5 12.865 11.1728 13 10.8369 13C10.7661 13 10.6981 12.9942 10.6311 12.9825C9.32238 12.767 8.02435 12.0709 6.97679 11.0243C5.9302 9.97864 5.23507 8.68155 5.01662 7.36893C4.95061 6.96796 5.08361 6.55534 5.37293 6.26408Z"
                ></path>
              </svg>
            </span>
            <span class="icon-txt">{{ phone }}</span>
          </li>
          <li>
            <span class="svg-icon">
              <svg width="18px" height="18px" viewBox="0 0 18 18" fill="none">
                <circle cx="9" cy="9" r="9" fill="white" fill-opacity="0.7"></circle>
                <path
                  d="M5 8.248V10.5C5 10.8978 5.15804 11.2794 5.43934 11.5607C5.72064 11.842 6.10218 12 6.5 12H11.5C11.8978 12 12.2794 11.842 12.5607 11.5607C12.842 11.2794 13 10.8978 13 10.5V8.248L9.205 9.956C9.14054 9.98498 9.07067 9.99996 9 9.99996C8.92933 9.99996 8.85946 9.98498 8.795 9.956L5 8.248ZM5.037 7.168L9 8.952L12.963 7.168C12.8877 6.83628 12.7019 6.53999 12.4361 6.32776C12.1702 6.11553 11.8402 5.99995 11.5 6H6.5C6.15984 5.99995 5.82976 6.11553 5.56393 6.32776C5.29809 6.53999 5.11229 6.83628 5.037 7.168Z"
                ></path>
              </svg>
            </span>
            <span class="icon-txt"> {{ email }} </span>
          </li>
          <li>
            <span class="svg-icon">
              <svg width="18px" height="18px" viewBox="0 0 18 18" fill="none">
                <circle cx="9" cy="9" r="9" fill="white" fill-opacity="0.7"></circle>
                <path
                  d="M9.02377 14C9.18525 14 9.70372 13.7999 10.4455 13.1626C11.624 12.1547 13 10.3837 13 8.71635C13 7.73066 12.5786 6.78551 11.8284 6.08848C11.0783 5.39152 10.0608 5 9 5C7.9392 5 6.92163 5.39152 6.1716 6.08848C5.42142 6.78545 5 7.73068 5 8.71643C5 11.3359 8.28402 13.9443 9.02377 14ZM8.99982 6.50256C9.50538 6.50256 9.99027 6.68914 10.3478 7.02129C10.7053 7.35344 10.9061 7.80394 10.9061 8.27361C10.9061 8.74328 10.7053 9.19379 10.3478 9.52593C9.99026 9.85806 9.50536 10.0447 8.99982 10.0447C8.49428 10.0447 8.00937 9.85807 7.65187 9.52593C7.29438 9.19378 7.09353 8.74328 7.09353 8.27361C7.09407 7.804 7.29508 7.35385 7.6524 7.02178C8.00983 6.68979 8.49435 6.50305 8.99982 6.50256Z"
                ></path>
              </svg>
            </span>
            <span class="icon-txt">{{ address }}</span>
          </li>
        </ul>
        <!-- <p>
          <span>男</span> | <span>22岁</span> |
          <span>前端开发工程师</span>
        </p> -->
        <!-- <p>
          <span> <a href="tel:17864270724"> 电话：17864270724</a> </span>| <span>微信：17864270724 </span>|
          <span>
            <a href="mailto:3417237276@qq.com">邮箱：3417237276@qq.com</a>
          </span>
        </p> -->
      </section>

      <section class="others">
        <h2>个人链接</h2>
        <ul class="flex flex-col gap-1">
          <li>
            <a href="http://draganet.gitee.io/" target="_break"><strong>我的博客</strong></a
            >，目前已有 40 多篇技术文章。
          </li>
          <li>
            <a href="http://github.com/drwna" target="_break"><strong>我的 GitHub</strong></a
            >，近一年有 500 多次提交。
          </li>
        </ul>
      </section>

      <section class="skills">
        <h2>专业技能</h2>
        <div class="wrapper">
          <ul>
            <li v-for="{content, index} in skills" :key="index" v-html="content"></li>
          </ul>
        </div>
      </section>

      <section class="experience">
        <h2> 工作经历 </h2>
        <ul>
          <li v-for="(item, index) in experience" :key="index">
            <header>
              <p class="job-title">{{ item.jobTitle }}</p>
              <p class="company">{{ item.company }}</p>
            </header>
            <main>
              <ul>
                <li v-for="(v, i) in item.content" :key="i">
                  <p v-html="v"></p>
                </li>
              </ul>
            </main>
          </li>
        </ul>
      </section>

      <section class="projects">
        <h2>项目经历</h2>

        <div class="corporate">
          <h3 class="font-semibold">公司项目</h3>
          <ol>
            <li v-for="(item, index) in projects.company" :key="index">
              <header class="text-lg">
                <h3>{{ item.title }}</h3>
                <div class="flex gap-2">
                  <a v-if="item.preview" :href="item.preview" target="_break">项目预览</a>
                  <a v-if="item.source" :href="item.source" target="_break">源码链接</a>
                </div>
              </header>
              <ul class="flex flex-col ml-2 list-decimal" style="margin-left: 36px">
                <li v-for="v in item.content">
                  <p v-html="v"></p>
                </li>
              </ul>
            </li>
          </ol>
        </div>

        <div class="line"></div>

        <div class="personal">
          <h3 class="font-semibold">个人开源项目</h3>
          <ol>
            <li v-for="(item, index) in projects.personal" :key="index">
              <header class="text-lg shrink">
                <h3>{{ item.title }}</h3>
                <div class="flex gap-2">
                  <a v-if="item.preview" :href="item.preview" target="_break" class="shrink-0">项目预览</a>
                  <a v-if="item.source" :href="item.source" target="_break" class="shrink-0">源码链接</a>
                </div>
              </header>
              <ul class="flex flex-col ml-2 list-decimal" style="margin-left: 36px">
                <li v-for="(v, i) in item.content">
                  <p v-html="v"></p>
                </li>
              </ul>
            </li>
          </ol>
        </div>
      </section>

      <section class="education">
        <h2>教育经历</h2>
        <div class="content">
          <span> 2018年~2021年 </span>
          <span> 山东电子职业技术学院 </span>
          <span> 软件技术 </span>
        </div>
      </section>
    </article>
    <script>
      window.onload = () => {
        document.oncontextmenu = () => false;
        document.onkeydown = () => {
          var e = window.event || arguments[0];
          /** keyCode
           * 123 F12
           * 73 Ctrl+Shift+I
           * 85 Ctrl+u
           * 83 Ctrl+s
           **/
          if (
            e.keyCode == 123 ||
            (e.ctrlKey && e.shiftKey && e.keyCode == 73) ||
            (e.ctrlKey && e.keyCode == 85) ||
            (e.ctrlKey && e.keyCode == 83)
          ) {
            return false;
          }
        };
      };
    </script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.47/vue.global.prod.js"></script>
    <script src="./main.js"></script>
  </body>
</html>
